<template>
	<section class="navbar-index ">
		<div class="wrap">
			<div id="logo-wrap">
				<div style="display: flex; align-items: center;">
					<img class="logo" :src="`/static/${themeColor}-img/logo.png`" />
					<div style="line-height:18px;margin-top:20px ">
						<div style="display: flex;justify-content: space-between;align-items: baseline;">
							<span class="logo_text">{{$t('nav.logo')}}</span>
							<span class="ch">{{$t('nav.zhlogo')}}</span>
						</div>
						<span class="en">{{$t('nav.enlogo')}}</span>
					</div>
				</div>
			</div>		
			<ul id="menu-top">
				<li :class="{'menu-top-active': $route.path ==='/home'||$route.path ==='/'}"  @click.prevent="jumpTo('/home')">
					<a >{{$t('nav.navBtn1')}}</a>
					<div :class="{line:$route.path ==='/home'||$route.path ==='/'}"></div>
				</li>
				<li :class="{'menu-top-active': $route.path.split('/')[1] === 'current'}" @click.prevent="jumpTo('/current')">
					<a>{{$t('nav.navBtn2')}}</a>
					<div :class="{line:$route.path.split('/')[1] ==='current'}"></div>
				</li>
				<li :class="{'menu-top-active': $route.path.split('/')[1] === 'defend'}" @click.prevent="jumpTo('/defend')">
					<a >{{$t('nav.navBtn3')}}</a>
					<div :class="{line:$route.path.split('/')[1] ==='defend'}"></div>
				</li>
				<li :class="{'menu-top-active': $route.path.split('/')[1] === 'system'}" @click.prevent="jumpTo('/system')">
					<a >{{$t('nav.navBtn4')}}</a>
					<div :class="{line:$route.path.split('/')[1] ==='system'}"></div>
				</li>
				<li :class="{'menu-top-active': $route.path.split('/')[1] === 'netManage'}" @click.prevent="jumpTo('/netManage')">
					<a >{{$t('nav.navBtn5')}}</a>
					<div :class="{line:$route.path.split('/')[1] ==='netManage'}"></div>
				</li>
				<li :class="{'menu-top-active': $route.path.split('/')[1] === 'logManage'}" @click.prevent="jumpTo('/logManage')" >
					<a >{{$t('nav.navBtn6')}}</a>
					<div :class="{line:$route.path.split('/')[1] ==='logManage'}"></div>
				</li>
			</ul>
			<ul id="user-handle" >
				<li @click="reload()">			
					<img src="../img/refresh.png"/>
					<p>{{$t('nav.freshBtn')}}</p>
				</li>
				<li class="save" @click="saveConf()">		
					<img  src="../img/save.png"/>
					<p>{{$t('nav.saveBtn')}}</p>
				</li>
				<li @click="goLogout()">
					<img src="../img/exit.png" />
					<p>{{$t('nav.exitBtn')}}</p>
				</li>
				<li class="photo">	
					<img  src="../img/photo.png" style="width:22px;"/>
					<p id="name">{{username ? username : '-'}}</p>
				</li>
			</ul>
			<Modals 
					:id ="'savesuccess'" 
					:title ="'提示'" 
					:type="'保存'" 
					:status = "result" 
					:errorMsg="errorMsg"
					@sentErrorMsg = "getErrorMsg" 
					@modalEvent = "savedata">
					<div slot="add_edit">
							<p style="font-size: 16px;">确定保存当前配置?</p>
					</div>
			</Modals>	
		</div>
	</section>
</template>
<script>

import Modals from 'components/common/Modals'
import userService from 'services/userService'
import sysService from 'services/systemService'

export default {			
	components: {
		Modals
	},
	data() {
		return{
			theme: this.themeColor,
			result:'',
			errorMsg:'',
			type:""
		}
	},
	computed:{
		username: function() {
			return this.$store.state.login.username
		}
	},
	methods: {
		jumpTo(page) {
			this.$router.push(page)
		},
		getErrorMsg(msg) {
			this.errorMsg = msg
		},
		reset() {
			this.result = ""
			this.errorMsg = ''
		},
		goLogout() {
			userService.logout()
				.then((res) => {
					if (res.errcode === 0) {
						this.$store.commit('EDIT_LOGIN', {"is_login": false, "username": null, "user_group": null, "windows": false})
					}
				})
		},
		saveConf() {
			this.reset()
			if (this.$store.state.cert.status === 'valid' || this.$store.state.cert.type === 'official') {				
			    $("#savesuccess").modal('show')
			}			
		},
		savedata() {
			this.result="ing"
			sysService.saveConfig()
			.then((res) => {
				
				if (res.errcode === 0) {
					this.result="ok"
				} else {
					this.result="error"
					this.errorMsg=res.errorMessage
				}
			})
		},
		reload() {
			location.reload()
		},
		actived(type) {			
			if (type === 'save' && !(this.$store.state.cert.status === 'valid' || this.$store.state.cert.type === 'official')) {
				this.type = ''
			} else {
				this.type = type
			}
		},
		unactived() {
			this.type = ""
		}
	}
}	
</script>
